<template>
	<div class="page_wrap">
		<div class="main">
			<section>
				<el-color-picker v-model="theme_color" :predefine="predefineColors" @change="changeFN"></el-color-picker>
				<p>切换主题色</p>
			</section>
			<section>
				<el-color-picker v-model="level2_bg_color" :predefine="predefineColors2" @change="changeFN2"></el-color-picker>
				<p>二级菜单背景色</p>
			</section>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				theme_color: this.$sysTheme().theme_color,
				level2_bg_color: this.$sysTheme().level2_bg_color,
				predefineColors: [
					'#409EFF',
					'#00BABD',
					'#8e4040',
					'#5a408e',
					'#408e4a',
					'#ca2828',
					'#75ca28',
					'#efe061',
					'#3c8dbc',
				],
				predefineColors2: [
					'#333333',
					'#444444',
					'#555555',
					'#666666',
					'#cccccc',
				],
			}
		},
		components: {

		},
		created() {

		},
		mounted() {

		},
		methods: {
			init() {

			},
			changeFN() {
				let obj = this.$sysTheme();
				obj.theme_color = this.theme_color || "#409eff";
				localStorage.setItem('sysTheme', JSON.stringify(obj));
				this.$bus.$emit('changeTheme');
			},
			changeFN2() {
				let obj = this.$sysTheme();
				obj.level2_bg_color = this.level2_bg_color || "#333333";
				localStorage.setItem('sysTheme', JSON.stringify(obj));
				this.$bus.$emit('changeTheme');
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page_wrap {
		background: #fff;
	}
	
	.main {
		display: flex;
		justify-content: flex-start;
		section {
			margin: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			p {
				margin: 10px 0 0 0;
			}
		}
	}
</style>